<template>
	<view class="user">
		<view class="navbar">
			<view :style="{height:sysHeight+'px'}"></view>
			<view class="navbarH acea-row row-center row-middle">
				<view class="fcwhite fs36 bold">个人中心</view>
			</view>
		</view>
		<view class="info-bg"></view>
		<view class="px30 info">
			<view class="acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<view class="avatar" @click="goEdit()">
						<image class="imgwh" v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
						<image v-else class="imgwh" src="/static/images/f.png" mode="" @click="goEdit()">
					</view>
					<view class="name" v-if="!userInfo.uid" @click="openAuto"
						style="height: 100%; display: flex; align-items: center;">
						{{$t('请点击授权')}}
					</view>
					<view class="ml20" v-else>
						<view class="fs40 fc222">{{ userInfo.nickname }}</view>
						<view class="fs26 fc333 mt10">ID：{{ userInfo.uid }}</view>
						<!-- <view class="fs26 fc333 mt10">手机号：{{ userInfo.phone || '-----' }}</view> -->
					</view>
				</view>
				<view class="iconfont icon-bianji" @click="goEdit()"></view>
			</view>
			<view class="bor-bot mt30"></view>
			
			<view class="jianyan-nav acea-row row-between-wrapper" @click="urlClick(`/pages/home/inspect`)">
				<view class="acea-row row-middle">
					<image class="jianyanicon" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/jianyan.png" mode=""></image>
					<text class="ml20">代报名核验中心</text>
				</view>
				<view class="iconfont icon-xiangyou1 fs36"></view>
			</view>
			
			<view class="join-box">
				<view class="fs36 fc333">我的参赛项目</view>
				<view class="acea-row row-middle row-center mt30">
					<view class="acea-row row-middle row-center row-column" @click="urlClick(`/pages/project/index?type=0`)">
						<image class="icon" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/compete01.png" mode="aspectFit"></image>
						<text class="fc333 fs32 mt20">参赛中</text>
					</view>
					<view>
						<image class="xian" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/compete03.png" mode="aspectFit"></image>
					</view>
					<view class="acea-row row-middle row-center row-column" @click="urlClick(`/pages/project/index?type=1`)">
						<image class="icon" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/compete02.png" mode="aspectFit"></image>
						<text class="fc333 fs32 mt20">已结束</text>
					</view>
				</view>
			</view>
			
			<view class="menu acea-row row-middle" @click="urlClick(`/pages/home/apply`)" v-if="userInfo.is_daili==0">
				<view class="" style="margin-left: 80rpx;">
					<view class="fc333 fs40">申请合作</view>
					<view class="btn mt20">点击申请</view>
				</view>
				<view>
					<image class="icon" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/menu-icon.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="menu acea-row row-middle" @click="urlClick(`/pages/home/daili`)" v-if="userInfo.is_daili==1">
				<view class="" style="margin-left: 80rpx;">
					<view class="fc333 fs40">代理入口</view>
					<view class="btn mt20">点击查看</view>
				</view>
				<view>
					<image class="icon" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/menu-icon.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="menu acea-row row-middle" @click="urlClick(`/pages/review/index`)">
				<view class="" style="margin-left: 80rpx;">
					<view class="fc333 fs40">评审入口</view>
					<view class="btn mt20">点击评审</view>
				</view>
				<view>
					<image class="icon" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/menu-icon.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="menu acea-row row-middle" @click="urlClick(`/pages/home/Invoicing-list`)">
				<view class="" style="margin-left: 80rpx;">
					<view class="fc333 fs40">申请开票</view>
					<view class="btn mt20">点击开票</view>
				</view>
				<view>
					<image class="applyicon" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/meun-apply.png" mode="aspectFit"></image>
				</view>
			</view>
			
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<tabbar path="/pages/user/user"></tabbar>
		
		<!-- <uni-popup type="center" ref="popup"> -->
<!-- 		<view class="pop-bg acea-row row-middle row-center" @click.stop="close()" v-if="xieyishow">
			<view class="xieyi">
				<view class="confrim-title">{{ catename }}</view>
				<view class="text">
					<parser :html="content" ref="article"></parser>
				</view>
				<view class="confirm acea-row row-middle row-center" :class="confrimShow?'confirm-no':''"
				@click.stop="confrim()">
					<text>确认阅读</text>
					<text v-if="seconut">({{ seconut }}s)</text>
				</view>
			</view>
		</view> -->

		<!-- </uni-popup> -->
		
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import tabbar from '../../components/tabbar.vue'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapState,
		mapGetters
	} from "vuex";
	import {
		getUserInfo,
	} from '@/api/user.js';
	import{
		xieyi
	} from '@/api/api.js'
	import parser from "@/components/jyf-parser/jyf-parser";
	export default {
		components:{
			tabbar,
			parser
		},
		computed: {
			...mapGetters({
				isLogin: 'isLogin'
			})
		},
		data() {
			return {
				sysHeight: sysHeight,
				userInfo:[],
				catename:'',
				content:'',
				confrimShow:1,
				seconut:10,
				timer:null,
				xieyishow:0,
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getUserInfo();
			this.getxieyi();
		},
		methods:{
			close(){
				this.xieyishow = 0;
				this.seconut = 10;
				this.confrimShow = 1;
				clearInterval(this.timer)
			},
			open(){
				this.xieyishow = 1;
				this.daojishi();
			},
			confrim(){
				let that = this;
				if( that.confrimShow == 0 ) return uni.navigateTo({
					url: '/pages/review/index'
				})
			},
			daojishi(){
				let that = this;
				that.timer = setInterval(()=>{
					if( that.seconut == 0 ) {
						that.confrimShow = 0;
						return clearInterval(that.timer)
					} 
					that.seconut = that.seconut-1;
				},1000)
			},
			getxieyi(){
				xieyi().then(res=>{
					this.catename = res.data.catename;
					this.content = res.data.content;
				})
			},
			urlClick(url){
				console.log(url);
				uni.navigateTo({
					url: url
				})
			},
			// 打开授权
			openAuto() {
				toLogin();
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
					that.$store.commit("SETUID", res.data.uid);
				});
			},
			// 编辑页面
			goEdit() {
				if (this.isLogin == false) {
					toLogin();
				} else {
					// #ifdef MP
					if (this.userInfo.is_default_avatar) {
						this.editModal = true
						return
					}
					// #endif
					uni.navigateTo({
						url: '/pages/users/user_info/index'
					})
				}
			
			},
		}
	}
</script>
 
<style lang="scss">
	page{ background-color: #ffffff !important; }
	.user{
		
		.pop-bg{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0,0,0,.3);
			z-index: 999;
			
			.xieyi{
				width: 690rpx;
				min-height: 690rpx;
				border-radius: 20rpx;
				background-color: #ffffff;
				padding: 30rpx;
				
				.confrim-title{
					text-align: center;
					color: #333333;
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 30rpx;
				}
				
				.text{
					width: 100%;
					height: 500rpx;
					overflow: auto;
					line-height: 60rpx;
					color: #333333;
					font-size: 30rpx;
				}
				.confirm{
					width: 100%;
					height: 88rpx;
					background: #6252DF;
					color: #ffffff;
					font-size: 30rpx;
					margin-top: 30rpx;
					border-radius: 15rpx;
					
					&.confirm-no{
						background: #f2f2f2;
						color: #999999;
					}
				}
			}
		}
		
		.navbar{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			
			.navbarH{
				width: 100%;
				height: 88rpx;
			}
		}
		
		.info-bg{
			width: 100%;
			height: 380rpx;
			background-size: 100% 100%;
			background-image: url('https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/user-top.png');
		}
		
		.info{
			position: relative;
			padding-top: 20rpx;
			
			.avatar{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				border: 7rpx solid #ffffff;
				margin-top: -50rpx;
				overflow: hidden;
			}
			.icon-bianji{
				font-size: 45rpx;
				color: #333333;
				margin-right: 30rpx;
			}
			.join-box{
				width: 690rpx;
				border-radius: 40rpx;
				box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
				margin-top: 40rpx;
				padding: 30rpx;
				
				.icon{
					width: 120rpx;
					height: 120rpx;
				}
				.xian{
					width: 150rpx;
					height: 20rpx;
					margin: 0 30rpx;
				}
				
			}
			
			.jianyan-nav{
				width: 690rpx;
				height: 106rpx;
				border-radius: 32rpx;
				box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
				margin-top: 30rpx;
				padding: 0 50rpx;
				font-size: 32rpx;
				color: #333333;
				
				.jianyanicon{
					width: 66rpx;
					height: 66rpx;
				}
			}
			
			.menu{
				width: 690rpx;
				height: 208rpx;
				border-radius: 104rpx;
				box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
				margin-top: 50rpx;
				position: relative;
				overflow: hidden;
				
				.btn{
					width: 152rpx;
					height: 52rpx;
					border-radius: 26rpx;
					text-align: center;
					line-height: 52rpx;
					background: rgba(81, 65, 197, 0.2);
					color: #5141C5;
					font-size: 24rpx;
				}
				.icon{
					width: 370rpx;
					height: 322rpx;
					position: absolute;
					bottom: -80rpx;
					right: 30rpx;
				}
				.applyicon{
					width: 370rpx;
					height: 248rpx;
					position: absolute;
					bottom: -40rpx;
					right: 30rpx;
				}
			}
			
			
			
			
		}
		
		
		
		
		
	}
</style>
